<template>
    <a-spin class="w-[100%]" :size="35" :loading="spinLoading" tip="正在处理, 请稍候...">
        <a-descriptions :column="2" bordered>
            <a-descriptions-item label="部门名称">{{ form.deptName }}</a-descriptions-item>
            <a-descriptions-item label="上级部门">
                <template v-if="form.parentDeptId === '0'">
                    顶级
                </template>
                <template v-else>
                    <dict-convert :dict-data="dicts[proxy.DICT.deptList]" :dict-key="form.parentDeptId" />
                </template>
            </a-descriptions-item>
            <a-descriptions-item label="排序">{{ form.deptSort }}</a-descriptions-item>
            <a-descriptions-item label="部门负责人">
                <dict-convert :dict-data="dicts[proxy.DICT.userList]" :dict-key="form.deptLeader" />
            </a-descriptions-item>
            <a-descriptions-item label="部门电话">{{ form.phone }}</a-descriptions-item>
            <a-descriptions-item label="部门邮箱">{{ form.email }}</a-descriptions-item>
            <a-descriptions-item label="部门状态">
                <dict-convert :dict-data="dicts[proxy.DICT.commonNumberStatus]" :dict-key="form.status" />
            </a-descriptions-item>
        </a-descriptions>
    </a-spin>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue'
import {getDeptByDeptIdApi} from "~/api/dept.js";

//全局实例
const { proxy } = getCurrentInstance()
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus, proxy.DICT.userList, proxy.DICT.deptList])
//加载中...
const spinLoading = ref(false)
//接收父组件参数
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
//表单
const form = reactive({
    //部门ID
    deptId: null,
    //上级部门ID
    parentDeptId: null,
    //部门名称
    deptName: null,
    //排序值
    deptSort: null,
    //部门负责人
    deptLeader: null,
    //部门电话
    phone: null,
    //部门邮箱
    email: null,
    //部门状态
    status: null,
})
//加载部门详细信息
const loadDeptInfo = (roleId) => {
    spinLoading.value = true
    getDeptByDeptIdApi(roleId).then(res => {
        //数据赋值
        if (res) {
            for (let key in res) {
                if (form.hasOwnProperty(key)) {
                    form[key] = res[key]
                }
            }
        }
    }).finally(() => {
        spinLoading.value = false
    })
}
//监听参数变化
watch(() => props.params, (newVal, oldVal) => {
    //部门ID
    if (props.params.deptId) {
        //查询数据
        loadDeptInfo(props.params.deptId)
    }
}, { deep: true, immediate: true })
</script>

<style scoped>

</style>
